import { Component, OnInit, Input } from '@angular/core';
import { HttpRequest } from "../../../service/httpRequest";

declare var $:any;
declare var Highcharts:any;

@Component({
  selector: 'chart-group-run',
  template: `
      <h4>设备正在运行台数：{{runData[0]}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;设备未运行台数：{{runData[1]}}</h4>
  		            <div id="runstais" style="height: 400px">
            			</div>

  `
})
export class GroupRunComponent implements OnInit {
  @Input() public groupId:string;
  option;
  runData:Array<number> = [0,0];

  constructor(private httpRequest:HttpRequest) { }

  ngOnInit() {
    this.paintRun();
  }

  paintRun(){

    this.httpRequest.sendGet('stat/zuyx/'+this.groupId).subscribe(res => {
      this.runData = res;
      this.devrunstatistics(this.runData)

    },err => console.log(err));
  }

  devrunstatistics(data) {
    var dta = data;
    //console.log(dta[0]);
    $('#runstais').highcharts({
      chart: {
        type: 'pie',
        options3d: {
          enabled: true,
          alpha: 45,
          beta: 0
        }
      },
      title: {
        text: '设备运行率'
      },
      subtitle: {
        text: '该群组下：设备运行总数占总设备数的比例'
      },
      tooltip: {
        pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b><br />'
      },
      plotOptions: {
        pie: {
          allowPointSelect: true,
          cursor: 'pointer',
          depth: 35,
          dataLabels: {
            enabled: true,
            format: '<b>{point.name}</b>: {point.percentage:.1f} %',
            style: {
              color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
            }
          }
        }
      },
      series: [{
        type: 'pie',
        name: '比例',
        data: [

          ['运行',dta[0]],
          ['未运行', dta[1]],

        ]
      }]
    });

  }

}
